<template>
	<view class="activityDetails">
        <view class="content">
            <view class="list_item">
            	<image :src="info.cover" mode=""></image>
            	<view class="item_info">
            		<view class="title">{{info.title}}</view>
            		<view class="title">{{info.code}}</view>
            		<view class="sketch">{{info.sketch}}</view>
            	</view>
            </view>
			<view class="con">
			    <view class="con-tiltle"> 赠送人姓名： </view>
			    <input class="con-ipnut" type="text" v-model="giveForm.giveName" placeholder="请输入赠送人姓名" value="" />
			</view>
			<view class="con">
			    <view class="con-tiltle"> 赠送人电话： </view>
			    <input class="con-ipnut" type="text" v-model="giveForm.giveMobile" placeholder="请输入赠送人电话" value="" />
			</view>
			<view class="con">
			    <view class="con-tiltle"> 受赠人姓名： </view>
			    <input class="con-ipnut" type="text" v-model="giveForm.sideName" placeholder="请输入受赠人姓名" value="" />
			</view>
            <view class="con">
                <view class="con-tiltle"> 受赠人电话： </view>
                <input class="con-ipnut" type="text" v-model="giveForm.sideMobile" placeholder="请输入受赠人电话" value="" />
            </view>
            <view class="but-box" :style="'height:' + bottomHeight + 'rpx;'">
                <view class="but" @click="apply()">确认赠送</view>
            </view>
			<uni-popup ref="previewpup" type="center">
				<view class="popbox">
					<swiper class="swiper" duration="500" :circular="false" :skip-hidden-item-layout="true" :disable-programmatic-animation="true" >
						<swiper-item  class="swiper-item" v-for="(itemImg,index) in shareList"  :key="index" :item-id="'swiper-item-' + index" >
							<view class="imagebox">	
								<image mode="widthFix" :lazy-load="true" :src="itemImg.max" :data-src="itemImg.src" />
							</view>
						</swiper-item>
					</swiper>
					
					<!-- 状态标识 -->
					<view class="maskshowrev">
					    <button class="btall bt2" open-type="share" @click="shareFun(1)">
					        <uni-icons type="weixin" color="#ccc" size="15"></uni-icons>
					        <text>发送给好友</text>
					    </button>
						<button class="btall bt3" @click="shareFun(3)">
						    <uni-icons type="pulldown" color="#ccc" size="15"></uni-icons>
						    <text>下载</text>
						</button>
						<button class="btall bt1" @click="shareFun(4)">
						    <uni-icons type="close" color="#ccc" size="15"></uni-icons>
						    <text>关闭</text>
						</button>
					</view>
				</view>
			</uni-popup>
        </view>
	</view>
</template>

<script>
	import serve from '../../static/request.js';
	import storage from '../../static/appkey.js';
	import common from '../../static/jump.js';
	import ShareIndex from '../../static/share.js';
	export default {
		mixins: [ShareIndex],
		data() {
			return {
				bottomHeight: 110,
				info: {},
				nowCurrent: 0,
				shareList: [],
				giveForm: {
					id: 0,
					giveName: '',
					giveMobile: '',
					sideName: '',
					sideMobile: '',
				}
			}
		},
		methods: {
			getMain() {
				var that = this;
				serve.request({
					url: '/member/member/card-info',
					data: {
						id: that.giveForm.id
					},
				}).then(res => {
					if(res.code == 200) {
						that.info = res.data;
						that.giveForm.giveName = res.data.nowMember;
						that.giveForm.giveMobile = res.data.nowMobile;
					} else {
						uni.showToast({
							title:res.message,
							icon: 'none',
							success() {
								setTimeout(function () {
									common.jump('cardList', 'state=1')
								}, 2000) 
							}
						})
					}
				});
			},
			shareFun(type) {
				this.shareItem = this.shareList[this.nowCurrent];
				
				if(type == 3) {
					var imgUrl = this.shareItem.imageUrl;
					uni.showModal({
						title: '提示',
						content: '确定要下载海报到您的相册吗',
						success: function (res) {
							if (res.confirm) {
								uni.downloadFile({
									url: imgUrl,
									success: (res) =>{
										if (res.statusCode === 200){
											uni.saveImageToPhotosAlbum({
												filePath: res.tempFilePath,
												success: function() {
													uni.showToast({
														title: "保存成功",
														icon: "none"
													});
												},
												fail: function() {
													uni.showToast({
														title: "保存失败",
														icon: "none"
													});
												}
											});
										} 
									},
									fail: function() {
										uni.showToast({
											title: "保存失败2",
											icon: "none"
										});
									}
								})
							} 
						}
					});
				}
				if(type == 4) {
					this.$refs.previewpup.close();
					common.jump("return_one")
				}
				return ;
			},
			apply(){
				var that = this;
				serve.request({
					url: '/member/member/card-give',
					data: that.giveForm,
				}).then(res => {
					let resuleCode = res.code;
					uni.showToast({
						title: res.message,
						icon: 'none',
						success() {
							if(resuleCode == 200) {
								that.shareList = res.data.shareList;
								that.$refs.previewpup.open();  
							}
						}
					});
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad(options) {
			if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
				this.bottomHeight = 178;
			}
			this.giveForm.id = options.id || 0;
		},
		onShow() {
			this.getMain();
		},
		onPullDownRefresh() {
			this.getMain();
		},
	}
</script>

<style  lang="scss" scoped>
	.activityDetails {
		padding-bottom: 200rpx;
		font-size: 32rpx;
		color: #1e2022;
	}
	.content {
        padding: 36rpx;
		
		.list_item {
			width: 650rpx;
			padding-bottom: 16rpx;
			display: flex;
			padding: 30rpx 20rpx 20rpx 20rpx;
			border: 1rpx solid #ccc;
			margin-bottom: 8rpx;
			border-radius: 14rpx;
			position: relative;
			image {
				width: 150rpx;
				height: 150rpx;
				border-radius: 2%;
			}
			
			.item_info {
				width: calc(100% - 160rpx);
				height: 150rpx;
				padding-left: 10rpx;
				font-size: 28rpx;
				color: #333;
			}
			.code{
				position: absolute;
				right: 4rpx;
				top: 4rpx;
				width: 250rpx;
				font-size: 35rpx;
			}
			.title {
				height: 40rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.sketch {
				font-size: 26rpx;
				color: #aaa;
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: -o-ellipsis-lastline;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
			.price{
				margin-top: 20rpx;
				font-size:28rpx;
				color: #42bfca;
				position: relative;
				
				.goPickup {
					width: 100rpx;
					height: 50rpx;
					line-height: 50rpx;
					position: absolute;
					right: 20rpx;
					top: -10rpx;
					border: 1rpx solid #ffd900;
					text-align: center;
					border-radius: 10rpx;
					color: #fff;
					background: #ffd900;
				}
			}
		}
    }
	
	
	.con {
		display: flex;
		position: relative;
		align-items: center;
		height: 100rpx;
		border-bottom: 2rpx solid #ededed;
	}
	.con-ipnut{
		height: 80rpx;
		padding-left: 20rpx;
		color: #dd6161;
		font-size: 30rpx;
		border: 1rpx solid #ccc;
		border-radius: 20rpx;
	}
	.con-but{
		position: absolute;
		right: 0;
		font-size: 28rpx;
		color: #ffffff;
		padding: 8rpx 16rpx;
		background: #FFBC00;
		border-radius: 8rpx;
	}
	


	.but-box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
	.but{
		background: #FFBC00;
		color: #fff;
		border-radius: 0;
		width: 100vw;
		height: 88rpx;
		text-align: center;
		line-height: 88rpx;
		font-size: 36rpx;
	}
	.popbox{
		width: 100vw;
		height: 100vh;
		//background-color: #333;
		display: flex;
		flex-direction: column; 
		justify-content: flex-start;
		align-items: center;
		padding-bottom: 140upx;
		position: relative;
		
		.swiper{
			width: 100%; 
			height: 100%;
			min-height: 500upx;
			position: absolute;
			top:0upx;
			left:0upx;
			
			.swiper-item{
				width: 100%; 
				height: 100%;
				min-height: 500upx;
				padding-bottom: 120upx;
				background-color: rgba(#000,0.8);
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				
				.imagebox{
					width: 100%;
					height: auto;
					min-height: 300upx; 
					background-size: 20% auto;
					background-position: center center;
					
					image{
						width: 100%;
						height: auto;
					}
				}
			}
		}
	
		.maskshowrev {
			width: 100%;
			height: 50upx;
			bottom: 250upx;
			position: fixed;
			display: flex;
			justify-content: space-around;
			
			//border: 1upx #fff solid;
			.btall {
				height: 50upx;
				border-radius: 25upx;
				padding: 0 20upx;
				color: #Fff;
				font-size: 24upx;
				line-height: 50upx;
				font-weight: normal;
				text-align: center; 
			}
			
			.bt1 {background-color: rgba(#780000, 0.9);}
			.bt2 {background-color: rgba(#7bc9d3, 0.9);}
			.bt3 {background-color: rgba(#ffcc00, 0.9);}
		}
	}
</style>
